import React, { FC, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom'
import './../../static/css/vislist.css'
import { vistusers, visdel ,visedit} from './../../apis/visList'
import { Popover } from 'antd';//气泡
import { Table, Tag } from 'antd';//表格
import type { ColumnsType, TablePaginationConfig } from 'antd/lib/table';
import { Form, Input, Select, Button, Pagination } from 'antd' //下拉框
import { DatePicker, Space } from 'antd';//时间选择器
import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';//时间选择器
import { getMaxListeners } from 'process';
const { Option } = Select;//下拉框
type Currency = 'rmb' | 'dollar'; //下拉框
const VisList: FC<any> = (props: any): JSX.Element => {
  const [params, setparams] = useState<any>({ page: 1, pageSize: 8 });
  const [collapsed, setCollapsed] = useState<any>([]);
  const [id, setid] = useState<string>('')
  const navigate = useNavigate()
  useEffect(() => {
    getList()
  }, [params]);

  const getList = async () => {
    const res: any = await vistusers(params)
    console.log(res);
    if (res.code === '00000') {
      setCollapsed(res.data)
      setPagination({ ...pagination, total: res.total })
    }
  }

  const onFinish =async (e: any) => {
      console.log("表单提交",e);
      const res: any = await vistusers(e)
      console.log(res);
      if (res.code === '00000') {
        setCollapsed(res.data)
      }
  }

 

  //时间选择器
  const onChange = (
    value: DatePickerProps['value'] | RangePickerProps['value'],
    dateString: [string, string] | string,
  ) => {
    // console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
  };

  const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
    // console.log('onOk: ', value);
  };
  const onChanges = (
    value: DatePickerProps['value'] | RangePickerProps['value'],
    dateString: [string, string] | string,
  ) => {
    // console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
  };

  const onOks = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
    // console.log('onOk: ', value);
  };
  //时间选择器


  // 下拉框
  const [currency, setCurrency] = useState<Currency>('rmb');
  const onCurrencyChange = (newCurrency: Currency, index: any) => {
    console.log(newCurrency);

  };
  const onCurrencyChanges = (newCurrency: Currency, index: any) => {
    console.log(newCurrency);

  };
  // 下拉框

  // 表格多选框
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChanges = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
    console.log(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChanges,
  };
  // 表格多选框


  // 表格
  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username'
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      key: 'mobile'
    },
    {
      title: '部门',
      dataIndex: 'department',
      key: 'department'
    },
    {
      title: '进校时间',
      dataIndex: 'starttime',
      key: 'starttime'
    },
    {
      title: '离校时间',
      dataIndex: 'endtime',
      key: 'endtime'
    },
    {
      title: '人员类型',
      dataIndex: 'type',
      render: (text: number) => (
        <div>
          {(() => {

            if (text === 1) {
              return "外来人员"
            }
            else if (text === 2) {
              return "老师"
            } else {
              return "学生"
            }

          })()}
        </div>
      )
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (text: number) => (
        <div>
          {(() => {
            if (text === 1) {
              return <Button type="primary" className='chushen'>待初核</Button>
            }
            else if (text === 2) {
              return <Button type="primary" className='ershen'>待二审</Button>
            } else if (text === 3) {
              return <Button type="primary" className='zhongshen'>终审通过</Button>
            } else {
              return "五"
            }
          })()}
        </div>
      )
    },
    {
      title: '是否离校',
      dataIndex: 'travelcode',
      key: 'travelcode',
      render: (text: number,record:any) => (
        <div>
          {(() => {

            if (text === 1) {
              return "是"
            }
            else {
              return "否"
            }
          })()}
        </div>
      )

    },
    {
      title: "操作",
      dataIndex: 'v_id',
      render: (text: number,record:any) => (<div className='editdiv'>*

        <Popover content={content} trigger="click" title="审核">
          <Button type="primary" style={{ marginRight: '12px' }} onClick={audit(text,record)} size="middle">审核</Button>
        </Popover>
        <Button type="default" size="middle">详情</Button>

      </                                                                                                                                                               div>)
    }
  ];
  const [records,setrecords]=useState({})
  const audit = (e: any,record:any) => {
    return (() => {
      // console.log(e);
      setid(e + '')
      setrecords(record)
    })
  }
  // 表格
  // 分页
  const [pagination, setPagination] = useState({
    current: 1,
    showSizeChanger: true,
    showQuickJumper: true,
    pageSize: 8,
    defaultPageSize: 8,
    total: 0
  })

  const pageChange = (page: number, pageSize: number) => {

    setPagination({ ...pagination, current: page, pageSize });
    setparams({ ...params, page, pageSize })

  }
  // 分页

  //审核气泡
  const Refused = (e: string) => {
    return (async () => {
      console.log(e);
      console.log(id);
      const res: any = await visdel({ v_id: id, isgree: e })
      console.log(res);
    })
  }
  const pass = (e: string) => {
    return (async () => {
      // console.log(e);
      // console.log(id);
      const res: any = await visdel({ v_id: id, isgree: e })
      // console.log(res)
    })
  }
  const content = (
    <div>
      <p>
        <Button type="default" onClick={Refused('0')} style={{ marginRight: '12px' }}>拒绝</Button>
        <Button type="primary" onClick={pass('1')}>通过</Button>
      </p>
    </div>
  );

  //审核气泡
  // 添加
  const add=()=>{
    navigate('/index/visitorAdd')
  }

  return (
    <div>
      <Form
        name="customized_form_controls"
        layout="inline"
        onFinish={onFinish}
        style={{ width: "1580px" }}
      >
        <Form.Item name="idorname">
          <Input placeholder='请输入访客姓名' />

        </Form.Item>
        <Form.Item name="mobile">
          <Input placeholder='请输入手机号' />
        </Form.Item>
        <Form.Item name="type">
          <Select style={{ width: 180, margin: '0 8px' }} onChange={onCurrencyChange} placeholder="请选择人员类型">
            <Option value={1}>外来人员</Option>
            <Option value={2}>老师</Option>
            <Option value={3}>学生</Option>
          </Select>
        </Form.Item>
        <Form.Item name="travelcode">
          <Select style={{ width: 180, margin: '0 8px' }} onChange={onCurrencyChanges} placeholder="请选择是否离校">
            <Option value={1}>未离校</Option>
            <Option value={2}>已离校</Option>
          </Select>
        </Form.Item>
        <Form.Item name="status">
          <Select style={{ width: 180, margin: '0 8px' }} onChange={onCurrencyChanges} placeholder="请选择审核状态">
            <Option key={1} >已取消</Option>
            <Option  key={2} value="1">待初审</Option>
            <Option   key={3}>初审拒绝</Option>
            <Option     key={4}value="2">待二审</Option>
            <Option    key={5}>二审拒绝</Option>
            <Option   key={6}>待终审</Option>
            <Option  key={7} value="3">待终通过</Option>
          </Select>
        </Form.Item>
        <Form.Item name="department">
          <Select style={{ width: 180, margin: '0 8px' }} onChange={onCurrencyChange} placeholder="请选择部门">
            <Option value="1">a</Option>
            <Option value="2">b</Option>
          </Select>
        </Form.Item>
        <Form.Item name="starttime">
          <Space direction="vertical" size={12}>
            <DatePicker showTime onChange={onChange} onOk={onOk} placeholder="进校时间" />
          </Space>
        </Form.Item>
        <Form.Item name="endtime">
          <Space direction="vertical" style={{ width: "186px" }} size={12}>
            <DatePicker showTime onChange={onChanges} onOk={onOks} placeholder="离校时间" />
          </Space>
        </Form.Item>
        <Form.Item>
          <Button type="primary" size="middle" htmlType="submit">
            查询
          </Button>
        </Form.Item>
        <Form.Item>
          <Button type="primary" className='add' onClick={add} size="middle">
            添加
          </Button>
        </Form.Item>
        <Form.Item>
          <Button type="primary" className='shen' size="middle">
            批量审核
          </Button>
        </Form.Item>
        <Form.Item>
          <Button type="primary" className='chu' size="middle">
            批量导出
          </Button>
        </Form.Item>
        <Form.Item>
          <Button type="primary" className='shen' size="middle">
            批量导入
          </Button>
        </Form.Item>
      </Form>
      <div>
        <Table rowKey="v_id" pagination={false} rowSelection={rowSelection} dataSource={collapsed} columns={columns} />
        <Pagination style={{ marginTop: '40px', float: "right" }} {...pagination} onChange={pageChange} />
      </div>
    </div>
  )
}
export default VisList;    